
import React from 'react';
import { Text, View, ScrollView, Image, TextInput, Button } from 'react-native';
import { HelloWorldApp } from './RNDemoapp/components/HelloWorldApp';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

function HomePage(){
  return <View />;
}

function MyCount(){
  return <View />;
}

function HomeScreen({navigation}) {
  return (
    <Tab.Navigator>
      <Tab.Screen name='HomePage' component={HomePage} />
      <Tab.Screen name='MyCount' component={MyCount} />
    </Tab.Navigator>
  );
}

function DetailsScreen({route,navigation}) {
  const { text } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>详情页</Text>
      <Text>{text}</Text>
      <Button 
        title='go to details...again'
        onPress={()=> navigation.push('Details',{text: '再次跳转详情页'})}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen 
          name="Home" 
          component={HomeScreen} 
          options={{
            title: 'My home',
            headerStyle: {
              backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
            },
          }}
          />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}
export default App;